<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">常见问题</view>
			</block>
		</cu-custom>
		<view class="padding-top-48 padding-left-16 padding-right-16">
			<view class="question-content" v-for="(item,index) in list" :key="index" @click="showInfo(item)">
				<image src="/static/img/que.png" class="ques-img"></image>
				<view class="flex align-center justify-between">
					<view class="title">
						{{item.name}}
					</view>
					<view>
						<text :class="item.isShow?'cuIcon-fold':'cuIcon-unfold'"></text>
					</view>
				</view>
				
				<view class="answer-content" v-if="item.isShow">
					<image src="/static/img/ans.png" class="ans-img"></image>
					<view>
						青牒碳账户基于区块链技术与云计算方案，用于记录、保管、分析企业和个人的碳排放数据与碳减排数据。通过数智技术，帮助客户挖掘减排收益,开发形成流通好、价值高、需求强的碳资产。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:"青蝶是什么？",isShow:true},
					{name:"青蝶是什么？",isShow:false},
					{name:"青蝶是什么？",isShow:false},
					{name:"青蝶是什么？",isShow:false},
				]
			}
		},
		onLoad(){
		},
		methods: {
			showInfo(item){
				item.isShow=!item.isShow;
				this.$forceUpdate();
			}
		}
	}
</script>

<style>
	page{
		background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);
	}
</style>
<style scoped lang="less">
	.question-content{
		background: #FFFFFF;
		border-radius: 48rpx;
		padding: 60rpx 40rpx 40rpx;
		position: relative;
		margin-bottom: 8rpx;
		.title{
			font-size: 28rpx;
			font-weight: 600;
			color: #010101;
		}
		.answer-content{
			margin-top: 56rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #010101;
		}
	}
	.ques-img{
		position: absolute;
		left: 40rpx;
		top: 40rpx;
		width: 30rpx;
		height: 48rpx;
	}
	.ans-img{
		position: absolute;
		left: 40rpx;
		top: 126rpx;
		width: 30rpx;
		height: 48rpx;
	}
</style>